<template>
	<sc-table-select class="tableSelect" :props="props" :params="params" @change="onChange" ref="select"
		style="opacity: 1; height: 1px;width: 1px; visibility: hidden;" v-model="selectModel" :multiple="multiple"
		:apiObj="$API.system.goods.list" :table-width="850" clearable collapse-tags collapse-tags-tooltip>
		<template #header="{form, submit}">
			<div style="display: flex;">
				<el-form :inline="true" :model="form">
					<el-form-item>
						<el-input placeholder="商品名称" v-model="form.keyword"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submit">查询</el-button>
					</el-form-item>
				</el-form>
				<div style="flex: 1;">
					&nbsp;
				</div>
			</div>
		</template>
		<el-table-column prop="id" label="编号" width="140"></el-table-column>
		<el-table-column label="预览" width="60" align="center">
			<template #default="{row}">
				<el-image style="max-width: 35px; max-height: 35px;" preview-teleported hide-on-click-modal
					:src="row.product_image+'?x-oss-process=image/resize,w_35&t='"
					:preview-src-list="[row.product_image]" show-progress fit="contain" :z-index="19900501" />
			</template>
		</el-table-column>
		<el-table-column prop="product_title" label="名称/金额">
			<template #default="{row}">
				<p>{{row.product_title}}</p>
				<p>价格：{{row.product_price}}</p>
			</template>
		</el-table-column>
		<el-table-column prop="created_at" label="创建时间" width="150"></el-table-column>
	</sc-table-select>

</template>

<script>
	export default {
		components: {

		},
		props: {
			params: {
				type: Object,
				default: () => {}
			},
			multiple: {
				type: Boolean,
				default: false
			},
			props: {
				type: Object,
				default: () => ({
					value: 'id'
				})
			},
			modelValue: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			selectModel: {
				get() {
					return this.modelValue;
				},
				set(val) {
					this.$emit('update:modelValue', val);
				}
			}
		},
		data() {
			return {
				cb: null
			}
		},
		mounted() {

		},
		methods: {
			onChange(e) {
				this.cb && this.cb(e)
			},
			toggleMenu(cb) {
				this.cb = cb;
				this.$refs.select.$refs.select.toggleMenu();
			}
		}
	}
</script>

<style scoped lang="scss">
	.tableSelect :deep(.el-select__selection) {
		display: none;
	}

	.tableSelect :deep(.el-select__wrapper) {
		padding: 0;
		height: auto;
		min-height: 1px;
	}
</style>
